<template>
    <div>

                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item prop="name" label="姓名">
                        <el-input
                            v-model="form.realName"
                            placeholder="姓名"
                            size="medium"
                            class="input"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="username" label="登录账号">
                        <el-input
                            v-model="form.username"
                            placeholder="登录账号"
                            size="medium"
                            class="input"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item prop="roleId" label="角色">
                        <el-select v-model="form.roleId"
                                   size="medium"
                                   class="input"
                                   clearable="true">
                            <el-option v-for="(role, index) in roles"
                                       :key="index"
                                       :label="role.name"
                                       :value="role.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="isEnabled" label="是否可用">
                        <el-checkbox
                            v-model="form.isEnabled"
                            @change="load()"
                        />
                    </el-form-item>


                    <el-form-item>
                        <el-button size="medium" @click="load()">
                            <el-icon>
                                <search/>
                            </el-icon>
                            查询
                        </el-button>
                        <el-button size="medium" @click="reset()">
                            <el-icon>
                                <refresh/>
                            </el-icon>
                            重置
                        </el-button>
                        <el-button size="medium" type="primary" @click="addUser()">
                            <el-icon>
                                <plus/>
                            </el-icon>
                            新增
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-table v-loading="loading" :data="page.records" :row-class-name="tableRowClassName" border size="medium"
                          @selection-change="selected">
                    <el-table-column align="center" header-align="center" label="序号" type="index" width="60">
                        <template #default="scope">
                            <span>{{ page.offset + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" header-align="center" label="登录用户名"
                                     prop="username"></el-table-column>
                    <el-table-column align="center" header-align="center" label="真实姓名"
                                     prop="realName"></el-table-column>
                    <el-table-column align="center" header-align="center" label="电话号码"
                                     prop="phoneNum"></el-table-column>
                    <el-table-column align="center" header-align="center" label="是否启用" prop="isEnabled">
                        <template #default="scope">
                            <span v-if="scope.row.isEnabled" style="color:var(--el-color-success)">是</span>
                            <span v-else style="color:var(--el-color-danger)">否</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" header-align="center" label="创建时间"
                                     prop="createTime"></el-table-column>
                    <el-table-column align="center" header-align="center" label="更新时间"
                                     prop="updateTime"></el-table-column>
                    <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
                        <template #default="scope">
                            <el-button size="small" type="text" @click="updateUser(scope.row.id)">
                                修改
                            </el-button>
                            <el-button size="small" type="text" @click="grantRoles(scope.row)">
                                角色
                            </el-button>
                            <el-button v-if="scope.row.isEnabled" :disabled="scope.row.username === 'admin'" size="small"
                                       type="text" @click="disableUser(scope.row.id, true)">
                                禁用
                            </el-button>
                            <el-button v-else size="small" type="text" @click="disableUser(scope.row.id, false)">
                                启用
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    :current-page="page.current"
                    :page-size="page.size"
                    :page-sizes="[15, 30, 50]"
                    :total="page.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                ></el-pagination>
        <user-form ref="userForm" @success="load"></user-form>
        <user-role-view ref="userRoleView" @load="load"></user-role-view>
    </div>
</template>

<script>
import UserForm from './UserForm.vue'
import UserRoleView from './UserRoleView.vue'
import _ from "lodash"

export default {
    components: {
        UserForm,
        UserRoleView
    },
    data: function () {
        return {
            //查询表单
            form: {
                username : null,
                realName: null,
                roleId: null,
                isEnabled: true
            },
            //角色列表
            roles: [],
            //查询结果
            page: {
                current: 1,
                size: 15,
                total: 0,
                offset: 0,
                records: []
            }
        };
    },

    mounted: function () {
        this.loadRoles()//加载角色
        this.reset()//重置查询表单
    },

    methods: {
        reset() {
            this.form = {
                username : null,
                realName: null,
                roleId: null,
                isEnabled: true
            }
            this.load()
        },
        /**
         * 加载数据
         */
        load() {
            this.loading = true;
            let params = {
                current: this.page.current,
                size: this.page.size
            }
            params = _.extend(params, this.form)

            this.$http.get('/admin/user/select', {params: params}).then((resp) => {
                this.loading = false
                if (resp.success) {
                    this.page = resp.data
                }
            }).catch(() => {
                this.loading = false
            })
        },

        /**
         * 加载角色
         */
        loadRoles() {
            this.$http.get('/admin/role/list').then((resp) => {
                if (resp.success) {
                    this.roles = resp.data
                }
            })
        },

        /**
         * 改变PageSize
         */
        pageSizeChange(val) {
            this.page.size = val;
            this.load();
        },

        /**
         * 翻页
         */
        currentPageChange(val) {
            this.page.offset = (val - 1) * this.page.size;
            this.load();
        },
        /**
         * 新增数据
         */
        addUser() {
            this.$refs.userForm.open()
        },
        /**
         * 更新数据
         */
        updateUser(id) {
            this.$refs.userForm.open(id)
        },


        disableUser(id, isDisable) {
            this.$confirm(isDisable ? '是否禁用此账号？' : '是否启用此账号？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let param = {id: id}
                let url = isDisable ? '/admin/user/disabled' : '/admin/user/enabled'
                this.$http.post(url, param).then((resp) => {
                    this.$message({
                        message: '操作成功', type: 'success', duration: 3000
                    });
                    this.load()
                })
            }).catch(() => {
            })
        },

        grantRoles(user) {
            this.$refs.userRoleView.open(user)
        },
    }
}
</script>

<style scoped>
.tree-panel {
    border-radius: var(--el-border-radius-base);
    border: 1px solid var(--el-border-color);
}
.tree-panel .el-header {
    text-align: left;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    background: #f9f9f9;
}
.tree-panel .el-tree {
    padding: 10px;
}

.user-layout .el-main {
    padding-top: 0;
}


</style>
